<template>
  <swiper class="blog-view-page-main" :circular="circular" :current="current" @change="_onChange" v-if="slide">
    <swiper-item v-for="(item,index) in tabs">
      <slot name="page" :index="index" :item="item"></slot>
    </swiper-item>
  </swiper>
  <view class="blog-view-page-main" v-else>
    <template v-for="(item,index) in tabs" v-if="current===index">
      <slot name="page" :index="index" :item="item"></slot>
    </template>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    },
    current: {
      type: Number,
      required: true
    },
    circular: {
      type: Boolean
    },
    slide: {
      type: Boolean
    }
  },
  emits: ["update:current"],
  methods: {
    _onChange(event) {
      this.$emit("update:current", event.detail.current)
    }
  }
}
</script>

<style scoped lang="scss">

.blog-view-page-main {
  height: 100%;
}

.blog-view-page-view {
  height: 100%;
  overflow: auto;
}

</style>
